<%@ include file="../shared/standardDirectives.jspf"%>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
	function showRoute(rowId){
		var sel = "#route "+"tr[routeId='"+rowId+"']";
		$(sel).slideToggle();
	}
	function searchAjax(){
		
		var from = $('#from').val();
		var to = $('#to').val();
		$.ajax({
	      url: "/rest/search/route",
	      dataType: "json",
	      success: function(xml){
			
		  },	
	      failure: function(reponse){
	    	  alert(response);
	      },
	      complete: function(){
	    	  	  
	      },
	      cache :false
	    });
	}
	function submitForm(){
		$.blockUI({ message: '<h1><img src="/img/ajax_load.gif" /> Please wait...</h1>' }); 
		document.forms['searchRouteForm'].submit();
		return true;
	}
	var map;
	function initialize(){
		var center = new google.maps.LatLng(28.649639,77.339308);
		var mapOptions = {
				zoom: 13,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				center: center
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		//neighborhoods.push(new google.maps.LatLng(<c:out value="${path.location}"></c:out>));
		var options = {
	      strokeColor: "#FF0000",
	      strokeOpacity: 0.8,
	      strokeWeight: 2,
	      fillColor: "#FF0000",
	      fillOpacity: 0.35,
	      map: map,
	      center: center,
	      radius: 1000
	    };
	    cityCircle = new google.maps.Circle(options);


	}
	function viewOnMap(fromLat, fromLong, toLat, toLong){
		var from = new google.maps.LatLng(fromLat, fromLong);
		var to = new google.maps.LatLng(toLat, toLong);
		var bound = new google.maps.LatLngBounds(from, to);
		map.setCenter(from);
		var options = {
	      strokeColor: "#FF0000",
	      strokeOpacity: 0.8,
	      strokeWeight: 2,
	      fillColor: "#FF0000",
	      fillOpacity: 0.35,
	      map: map,
	      center: from,
	      radius: 1000
	    };
	    cityCircle = new google.maps.Circle(options);
	}
	$(document).ready(function(){
		initialize();
		$.ajaxSetup({
			dataType: "xml",
			cache : false
		});
		$( "#fromStr" ).autocomplete({
			  source: function(request, response) {
			  	$.ajax({
			      url: "/rest/search/stop?searchStr="+$('#fromStr').val(),
			      success: function( xmlResponse ) {
			        var data = $( "stop", xmlResponse ).map(function() {
					  return {
			            value: $( "name", this ).text(),
			            id: $( "id", this ).text(),
			            code: $( "code", this ).text(),
			            location: $( "location", this ).text(),
			          };
			        });
			        response(data);
			      }
			    })
			  },
			  minLength: 3,
			  select: function( event, ui ) {
				if(ui.item){
					$("#from").val(ui.item.location);
					$("#fromCode").val(ui.item.code);
				}else{
					alert("Nothing selected, input was " + this.value);	
				}  
			    
			  },
			  minChars:3
			});
			$( "#toStr" ).autocomplete({
			  source: function(request, response) {
			  	$.ajax({
			      url: "/rest/search/stop?searchStr="+$('#toStr').val(),
			      success: function( xmlResponse ) {
			        var data = $( "stop", xmlResponse ).map(function() {
					  return {
			            value: $( "name", this ).text(),
			            id: $( "id", this ).text(),
			            code: $( "code", this ).text(),
			            location: $( "location", this ).text(),
			          };
			        });
			        response(data);
			      }
			    })
			  },
			  minLength: 3,
			  select: function( event, ui ) {
				if(ui.item){
					$("#to").val(ui.item.location);
					$("#toCode").val(ui.item.code);
				}else{
					alert("Nothing selected, input was " + this.value);	
				}  
			    
			  },
			  minChars:3
			});
		});      
</script>
<html:form action="/route/search.do">
<table id="box-table-b">
	<thead>
		<tr>
			<th colspan="3" scope="col">Plan Your Journey</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3">
				<em>The above data were fictional and made up, please do not sue me</em>
			</td>
		</tr>
	</tfoot>
	<tbody>
		<tr height="10">
			<td><label>From: </label></td>
			<td align="left">
				<html:hidden name="searchRouteForm" property="from" styleId="from"/>
				<html:text name="searchRouteForm" property="fromStr" styleId="fromStr" />
				<html:hidden name="searchRouteForm" property="fromCode" styleId="fromCode"/>
				<html:select name="searchRouteForm" property="originType">
					<html:optionsCollection name="searchRouteForm" property="types" label="name" value="id" />
				</html:select>
			</td>
			<td>
				
			</td>
			<td rowspan="100%" style="display: none;">
				<div id="map_canvas" style="width: 300px; height: 300px;">map div</div>
			</td>
		</tr>
		<tr  height="10" id="toRow">
			<td><label>To: </label></td>
			<td align="left">
				<html:hidden name="searchRouteForm" property="to" styleId="to"/>
				<html:text name="searchRouteForm" property="toStr" styleId="toStr" />
				<html:hidden name="searchRouteForm" property="toCode" styleId="toCode"/>
				<html:select name="searchRouteForm" property="destinationType">
					<html:optionsCollection name="searchRouteForm" property="types" label="name" value="id" />
				</html:select>
			</td>
			<td>
			</td>
		</tr>
		<tr>
			<td></td>
			<td align="left">
				<div>
				<img src="/images/icon-tube.gif" alt="Metro">&nbsp;&nbsp;&nbsp;&nbsp;
				<img src="/images/icon-buses.gif" alt="Bus">&nbsp;&nbsp;&nbsp;&nbsp;
				<img src="/images/icon-cab.jpg" alt="Cab">&nbsp;&nbsp;&nbsp;&nbsp;
				<img src="/images/icon-bike.gif" alt="Bike">&nbsp;&nbsp;&nbsp;&nbsp;
				<img src="/images/icon-walk.gif" alt="Walk">&nbsp;&nbsp;&nbsp;&nbsp;
				</div>
				<div>
					&nbsp;
					<input type="checkbox" checked="checked" disabled="disabled" alt="Metro">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="checkbox" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="checkbox" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
					<input type="checkbox" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
					<input type="checkbox" disabled="disabled">
				</div>
			</td>
			<td></td>
		</tr>
		<tr>
			<td align="right" colspan="2">
				<input type="button" value="Search" class="rounded {transparent} button" onclick="return submitForm();">
			</td>
			<td></td>
		</tr>
		
	</tbody>
	<c:if test="${! empty searchRouteForm && searchRouteForm.result ne null}">
		<thead>
			<tr height="5">
				<th>Route</th>
				<th>No of stops</th>
				<th>Interchanges</th>
			</tr>
		</thead>
		<tbody>
			<c:set var="rowCounter" value="${1}"/>
			<c:forEach var="route" items="${searchRouteForm.result.routes}" varStatus="status">
				<tr id="test${rowCounter}">
					<td align="left"><c:out value="${status.count}"></c:out></td>
					<td align="left"><c:out value="${route.stopCount}"></c:out></td>
					<td align="left">
						<c:out value="${route.changes}" />
					</td>
				</tr>
				<c:forEach var="journey" items="${route.path}" varStatus="status2">
					<tr id="route" routeId="${rowCounter}">
						<td></td>
						<td align="left"><c:out value="${journey.source}"/>&nbsp; to <c:out value="${journey.destination}"/></td>
						<td align="left">
							<c:if test="${journey.metroJourney}">
								<img src="/images/icon-tube.gif" alt="Metro">&nbsp;&nbsp;&nbsp;&nbsp;
							</c:if>
							<c:if test="${journey.busJourney}">
								<img src="/images/icon-buses.gif" alt="Metro">&nbsp;&nbsp;&nbsp;&nbsp;
							</c:if>
							<c:if test="${journey.walkJourney}">
								<img src="/images/icon-walk.gif" alt="Metro">&nbsp;&nbsp;&nbsp;&nbsp;
							</c:if>
							<c:out value="${journey.colorCode}"></c:out>
						</td>
					</tr>
				</c:forEach>
				<c:set var="rowCounter" value="${rowCounter+1}"/>
			</c:forEach>
		</tbody>
	</c:if>
</table>
</html:form>